import { motion, useScroll, useTransform } from 'framer-motion'
import { Link } from '@tanstack/react-router'
import { useEffect, useState } from 'react'

export function AnimatedNavbar() {
  const [isScrolled, setIsScrolled] = useState(false)
  const { scrollY } = useScroll()
  
  // 滚动收缩效果 - 根据滚动位置动态变化
  const scale = useTransform(
    scrollY,
    [0, 200],
    [1, 0.85]
  )

  const backgroundOpacity = useTransform(
    scrollY,
    [0, 100],
    [0.8, 0.95]
  )

  const blurAmount = useTransform(
    scrollY,
    [0, 100],
    [8, 20]
  )

  const fontSize = useTransform(
    scrollY,
    [0, 200],
    [24, 18]
  )

  const paddingY = useTransform(
    scrollY,
    [0, 200],
    [16, 8]
  )

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50)
    }
    
    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

  return (
    <motion.nav
      className="fixed top-0 left-0 right-0 z-50"
      style={{
        scale,
        transformOrigin: 'top center'
      }}
      initial={{ y: -100 }}
      animate={{ y: 0 }}
      transition={{ duration: 0.6, ease: "easeOut" }}
    >
      <motion.div
        className="w-full backdrop-blur-sm"
        style={{
          backgroundColor: backgroundOpacity,
          backdropFilter: blurAmount
        }}
      >
        <motion.div 
          className="container mx-auto px-4"
          style={{ paddingTop: paddingY, paddingBottom: paddingY }}
        >
          <div className="flex items-center justify-between">
            {/* Logo */}
            <motion.div
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              <Link 
                to="/" 
                className="font-serif font-bold text-rose-600 flex items-center space-x-2"
              >
                <motion.span
                  style={{ fontSize }}
                  animate={{ rotate: [0, 10, -10, 0] }}
                  transition={{ duration: 2, repeat: Infinity, repeatDelay: 3 }}
                >
                  💕
                </motion.span>
                <motion.span style={{ fontSize }}>我们的小世界</motion.span>
              </Link>
            </motion.div>

            {/* Navigation Links */}
            <div className="flex space-x-8">
              {[
                { to: '/our-story', label: '我们的故事', icon: '💖' },
                { to: '/daily-sweetness', label: '生活小确幸', icon: '🌻' },
                { to: '/bucket-list', label: '未来约定', icon: '✨' },
                { to: '/love-letters', label: '情书便签', icon: '💌' },
                { to: '/search', label: '搜索', icon: '🔍' }
              ].map((item, index) => (
                <motion.div
                  key={item.to}
                  initial={{ opacity: 0, y: -20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ 
                    duration: 0.5, 
                    delay: index * 0.1,
                    ease: "easeOut"
                  }}
                  whileHover={{ 
                    scale: 1.05,
                    y: -2
                  }}
                  whileTap={{ scale: 0.95 }}
                >
                  <Link 
                    to={item.to}
                    className="group relative text-gray-700 hover:text-rose-600 font-medium transition-colors duration-200 flex items-center space-x-2"
                  >
                    <motion.span
                      className="text-lg"
                      whileHover={{ 
                        scale: 1.2,
                        rotate: [0, -10, 10, 0]
                      }}
                      transition={{ duration: 0.3 }}
                    >
                      {item.icon}
                    </motion.span>
                    <span className="relative">
                      {item.label}
                      <motion.div
                        className="absolute -bottom-1 left-0 h-0.5 bg-gradient-to-r from-rose-400 to-pink-400 rounded-full"
                        initial={{ width: 0 }}
                        whileHover={{ width: '100%' }}
                        transition={{ duration: 0.3 }}
                      />
                    </span>
                  </Link>
                </motion.div>
              ))}
            </div>
          </div>
        </motion.div>

        {/* 滚动时的底部阴影 */}
        <motion.div
          className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-rose-200 to-transparent"
          initial={{ opacity: 0 }}
          animate={{ opacity: isScrolled ? 1 : 0 }}
          transition={{ duration: 0.3 }}
        />
      </motion.div>
    </motion.nav>
  )
}
